<template>
    <div class="chat-wrapper">
        <div class="chat-window">
            <div v-for="(message, index) in messages" :key="index" :class="{ 'my-message': message.isMe }">
                <div class="message-sender">{{ message.sender }}</div>
                <div class="message-text">{{ message.text }}</div>
            </div>
        </div>
        <form @submit.prevent="sendMessage" class="input-wrapper">
            <input type="text" v-model="newMessageText" placeholder="输入消息...">
            <button type="submit"><i class="fa fa-paper-plane"></i></button>
        </form>
    </div>
</template>

<script>
    import { request } from "@/axios/request"
    export default {
        data() {
            return {
                flag:'0',
                messages: [
                    {
                        sender: '校园AI',
                        text: '你好！我还不是成熟的AI，我的回答可能不准确，有什么我可以帮助你的吗？',
                        isMe: false
                    },
                    {
                        sender: '用户',
                        text: '你能告诉我有哪些Vue.js的优点吗？',
                        isMe: true
                    },
                    {
                        sender: '校园AI',
                        text: '当然了！Vue.js具有简单易学、高效灵活、双向数据绑定等诸多优点。',
                        isMe: false
                    }
                ],
                newMessageText: '',
                requestMessage:{
                    question: this.newMessageText,
                }
            }
        },
        methods: {
            async sendMessage() {
                this.requestMessage.question = this.newMessageText
                this.messages.push({
                    sender: '用户',
                    text: this.newMessageText,
                    isMe: true
                })

                if (this.newMessageText == "进入任务模式"){
                    this.flag = 1;
                }



                await request({
                    url:'/api/qabot2',
                    method:'post',
                    data:this.requestMessage,
                    timeout: 20000
                }).then((resp)=>{
                    this.messages.push({
                        sender: '校园AI',
                        text: resp.data.object,
                        isMe: false
                    })
                    this.newMessageText = ''
                    this.requestMessage.content += resp.data.object
                    this.$nextTick(() => {
                        this.scrollToBottom()
                    })
                })



            },
            scrollToBottom() {
                const chatWindow = this.$el.querySelector('.chat-window')
                chatWindow.scrollTop = chatWindow.scrollHeight
            }
        },
        mounted() {
            this.scrollToBottom()
        }
    }
</script>

<style scoped>
    .chat-wrapper {
        position: relative;
        height: 100vh;
        background-image: url(../../static/image/9991.jpg);
        background-size: cover;
        background-position: center center;
    }

    .chat-window {
        border: 1px solid #ccc;
        height: calc(100% - 50px);
        overflow-y: scroll;
        padding: 10px;
    }

    .my-message {
        background-color: #d3d3d3;
        margin-left: 50%;
    }

    .message-sender {
        font-weight: bold;
        margin-bottom: 5px;
    }

    .message-text {
        margin-bottom: 10px;
    }

    .input-wrapper {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #ccc;
        padding: 0 10px;
    }

    .input-wrapper input[type="text"] {
        border: none;
        flex: 1;
        padding: 10px;
        font-size: 16px;
        color: #333;
    }

    .input-wrapper button[type="submit"] {
        border: none;
        background-color: transparent;
        color: #333;
        font-size: 20px;
        margin-left: 10px;
        cursor: pointer;
        outline: none;
    }
</style>
